<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>添加删除记录练习</title>
    <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
    <script type="text/javascript">
      window.onload = function () {
        /*
         * 点击超链接以后，删除一个员工的信息
         */

        //获取所有额超链接
        var allA = document.getElementsByTagName('a');

        //为每个超链接都绑定一个单击响应函数
        for (var i = 0; i < allA.length; i++) {
          /* 
            for循环会在页面加载完成之后立即执行,
              而响应函数会在超链接被点击时才执行
            当响应函数执行时,for循环早已执行完毕
          */

          alert('for循环正在执行' + i);
          allA[i].onclick = function () {

            alert('响应函数正在执行');
            
            alert(allA[i]);
            
            return false;
          };
        }
      };
    </script>
  </head>
  <body>
    <table id="employeeTable">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="javascript:;">Delete</a></td>
      </tr>
      <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
      </tr>
    </table>

    <div id="formDiv">
      <h4>添加新员工</h4>

      <table>
        <tr>
          <td class="word">name:</td>
          <td class="inp">
            <input type="text" name="empName" id="empName" />
          </td>
        </tr>
        <tr>
          <td class="word">email:</td>
          <td class="inp">
            <input type="text" name="email" id="email" />
          </td>
        </tr>
        <tr>
          <td class="word">salary:</td>
          <td class="inp">
            <input type="text" name="salary" id="salary" />
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button id="addEmpButton" value="abc">Submit</button>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
